.progress-indicator {
  --max: 100;
  --value: 0;
  --value-color: var(--bl-color-success);
  --height: var(--bl-size-2xs);
  --radius: var(--bl-border-radius-s);

  position: relative;
  background-color: var(--bl-color-neutral-lightest);
  height: var(--height);
  border-radius: var(--radius);
  width: 100%;
  transform: scaleX(var(--bl-text-x-direction));
}

.progress-indicator::before {
  content: "";
  position: absolute;
  height: 100%;
  width: calc(100% / var(--max) * var(--value));
  background-color: var(--value-color);
  border-radius: var(--radius);
  transition: width ease var(--bl-progress-indicator-transition-duration, 0.2s);
}

:host([size="small"]) .progress-indicator {
  --height: var(--bl-size-3xs);
  --radius: var(--bl-border-radius-xs);
}

:host([size="large"]) .progress-indicator {
  --height: var(--bl-size-xs);
  --radius: var(--bl-border-radius-m);
}

:host([failed]) .progress-indicator {
  --value-color: var(--bl-color-danger);
}
